import $ from 'jquery'
class IndexCarouse {
    constructor() {
        this.oUl = $('.carousel-list')

        this.oUl_I = $('.indicator-list')
        this.oLis = this.oUl_I.children()

    }
    indicatorClick() {
        let ul = this.oUl,
            lis = this.oLis,
            len = lis.length,
            index = 0

        for (let i = 0; i < len; i++) {
            let btn = lis[i].children[0]
            btn.addEventListener('click', btnClick, false)

            function btnClick(e) {
                const target = e.target || window.event.target

                ul.css({
                    "transform": `translateX(${-1200 * i}px)`,
                    "transition": "transform 1s ease .5s"
                })
                target.style.opacity = 0.3

                
            }
        }


    }
    carAutoChange() {


        changeRun(this.oUl, this.oLis, 1200)

        function changeRun(ul, lis, size) {
            let index = 0
            let btns = []
            let len = lis.length

            for (let i = 0; i < len; i++) {
                let btn = lis[i].children[0]
                btns.push(btn)
            }

            let timer = setInterval(run, 3000)

            function run() {
                index++

                if (index >= len) { index = 0 }
                ul.css({
                    "transform": `translateX(${-size * index}px)`,
                    "transition": "transform 1s ease .5s"
                })

                btns.forEach((item, i) => {
                    if (index === i) {
                        item.style.opacity = 0.3
                    } else {
                        item.style.opacity = 0.8
                    }
                })

            }
        }
    }

    bindEvents() {
        this.carAutoChange()
        this.indicatorClick()
    }

    init() {
        this.bindEvents()
    }
}

export {
    IndexCarouse
}
